Dashboard.addWidget({
    
    getId : function(){
        return "cartesian-charts-widget";
    },
    
    getName : function(){
        return "Cartesian Charts";
    },
    
    getDescription : function(){
        return {
            en : 'Widget that display one or more KPIs in a chart',
            de : 'Widget that display one or more KPIs in a chart'
        };
    },
    
    getIconClass : function(){
        return 'glyphicon glyphicon-signal';
    },
    
    createContent : function(configuration, currentWidgetInstanceId){
        var chartType = configuration.chartType.value;
        var modelId = configuration.modelId.value;
        var kpiId = configuration.kpiId.value;
        var kpiFieldForAxisX = configuration.kpiFieldForAxisX.value;
        var kpiFieldForAxisY = configuration.kpiFieldForAxisY.value;
        var kpiMoreInfoForThreshold = configuration.kpiMoreInfoForThreshold.value;
        var kpiMoreInfoForAlert = configuration.kpiMoreInfoForAlert.value;
        
        var kpiInfo = ModelManager.getKpiInfo(modelId, kpiId);
        var kpiMeasure = Dashboard.evaluateKpi(currentWidgetInstanceId, modelId, kpiId);
        
        if(kpiFieldForAxisX!='' && !kpiMeasure.columns.includes(kpiFieldForAxisX))
            throw 'Invalid field for the X Axis provided: ' + kpiFieldForAxisX;
        if(!kpiMeasure.columns.includes(kpiFieldForAxisY))
            throw 'Invalid field for the Y Axis provided: ' + kpiFieldForAxisY;
        
        var xData = [];
        var yData = [];
        kpiMeasure.data.forEach(function(item, index){
            xData.push(kpiFieldForAxisX!=''?item[kpiFieldForAxisX]:index);
            yData.push(item[kpiFieldForAxisY]);
        });
        xData.reverse();
        
        var xDataUnit = kpiFieldForAxisX!=''?kpiInfo.getFieldInfos(kpiFieldForAxisX).measureUnit:'Counter';
        var yDataUnit = kpiInfo.getFieldInfos(kpiFieldForAxisY).measureUnit;
        
        var thresholdNum = kpiInfo.moreInfo[kpiMoreInfoForThreshold];
        var alertNum = kpiInfo.moreInfo[kpiMoreInfoForAlert];
        
        var chartScales = {};
        if(chartType!='radar'){
            chartScales = {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: xDataUnit
                    },
                    ticks: {
                        suggestedMin: 0
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: yDataUnit
                    },
                    ticks: {
                        suggestedMin: 0
                    }
                }]
            };
        }
        
        var annotations = [];
        if(thresholdNum!=''){
            annotations.push({
                type: 'line',
                mode: chartType=='horizontalBar'?'vertical':'horizontal',
                scaleID: chartType=='horizontalBar'?'x-axis-0':'y-axis-0',
                value: thresholdNum,
                borderColor: 'red',
                borderWidth: 2,
                label: {
                    backgroundColor: 'red',
                    content: 'Threshold: '+thresholdNum,
                    position: 'right',
                    enabled: true
                  }
            });
        }
        if(alertNum!=''){
            annotations.push({
                type: 'line',
                mode: chartType=='horizontalBar'?'vertical':'horizontal',
                scaleID: chartType=='horizontalBar'?'x-axis-0':'y-axis-0',
                value: alertNum,
                borderColor: 'rgb(255, 182, 0)',
                borderWidth: 2,
                label: {
                    backgroundColor: 'rgb(255, 182, 0)',
                    content: 'Alert: '+alertNum,
                    position: 'right',
                    enabled: true
                  }
            });
        }
        
        var options = {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            
            scales: chartScales,
            
            pan: {
                enabled: true,
                mode: 'xy'
            },
            zoom: {
                enabled: true,
                mode: 'xy'
            },
            
            annotation: {
                annotations: annotations
            }
        };
        if(chartType=='radar'){
            delete options.scales;
            options.scale = {
                ticks: {
                    suggestedMin: 0
                }
            }
        }
        
        var canvas = $('<canvas>');
        var chart = new Chart(canvas, {
            type: chartType!='curve'?chartType:'line',
            data: {
                labels: xData,
                datasets: function(){
                    var param = {
                        label: kpiInfo.name,
                        backgroundColor : 'rgb(54, 162, 235, 0.4)',
                        borderColor : 'rgb(54, 162, 235)',
                        borderWidth: 1,
                        fill: true,
                        data: yData
                    }; 
                    if(chartType=='line')
                        param.lineTension=0;
                    return[param];
                }()
            },
            options: options
        });

        return canvas;
    },
    
    
    getConfiguration : function(){
        return {
            chartType : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            modelId : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiId : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiFieldForAxisX : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiFieldForAxisY : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiMoreInfoForThreshold : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiMoreInfoForAlert : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            }
        };
    },
    
    createConfiguration : function(presetConfig){
        var VIEW = {
                
            chartTypeSelect : $('<select>')
                .append('<option value="bar">Bars (vertical)</option>')
                .append('<option value="horizontalBar">Bars (horizontal)</option>')
                .append('<option value="line">Line</option>')
                .append('<option value="curve">Curve (Interpolated)</option>')
                .append('<option value="radar">Radar</option>'),
                
            modelSelect : $('<select>')
                .append(function(){
                    var modelSelectArray = [
                        '<option value="">--Select a Model--</option>'
                    ];
                    ModelManager.getKpiModelList().forEach(function(item){
                        modelSelectArray.push('<option value="' + item.id + '">' + item.name + '</option>');
                    }, this);
                    return modelSelectArray;
                }())
                .change(function(){
                    var modelId = VIEW.modelSelect.find(":selected").val();
                    VIEW.kpiSelect.empty();
                    VIEW.kpiSelect.append('<option value="">--Select a KPI--</option>');
                    if(modelId != '')
                        ModelManager.getKpiList(modelId).forEach(function(item){
                            VIEW.kpiSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                        }, this);
                    VIEW.kpiSelect.trigger("change");
                }),
                
            kpiSelect : $('<select>').append('<option value="">--Select a KPI--</option>')
                .change(function(){
                    VIEW.kpiFieldsForXSelect.empty();
                    VIEW.kpiFieldsForXSelect.append('<option value="">--Select a KPI Field--</option>');
                    VIEW.kpiFieldsForYSelect.empty();
                    VIEW.kpiFieldsForYSelect.append('<option value="">--Select a KPI Field--</option>');
                    VIEW.kpiMoreInfoForThresholdSelect.empty();
                    VIEW.kpiMoreInfoForThresholdSelect.append('<option value="">--Select a KPI Info--</option>');
                    VIEW.kpiMoreInfoForAlertSelect.empty();
                    VIEW.kpiMoreInfoForAlertSelect.append('<option value="">--Select a KPI Info--</option>');
                    
                    var modelId = VIEW.modelSelect.find(":selected").val();
                    var kpiId = VIEW.kpiSelect.find(":selected").val();
                    if(modelId=='' || kpiId=='')
                        return;
                    
                    var kpiInfo = ModelManager.getKpiInfo(modelId, kpiId);
                    
                    kpiInfo.fields.forEach(function(item){
                        VIEW.kpiFieldsForXSelect.append('<option value="' + item.name + '">' + item.name + '</option>');
                    }, this);                    
                    
                    kpiInfo.fields.forEach(function(item){
                        VIEW.kpiFieldsForYSelect.append('<option value="' + item.name + '">' + item.name + '</option>');
                    }, this);                    
                    
                    for(var item in kpiInfo.moreInfo)
                        VIEW.kpiMoreInfoForThresholdSelect.append('<option value="' + item + '">' + item + '</option>');                   
                    
                    for(var item in kpiInfo.moreInfo)
                        VIEW.kpiMoreInfoForAlertSelect.append('<option value="' + item + '">' + item + '</option>');
                }),
                
            kpiFieldsForXSelect : $('<select>').append('<option value="">--Select a KPI Field--</option>'),
            
            kpiFieldsForYSelect : $('<select>').append('<option value="">--Select a KPI Field--</option>'),
            
            kpiMoreInfoForThresholdSelect : $('<select>').append('<option value="">--Select a KPI Info--</option>'),
            
            kpiMoreInfoForAlertSelect : $('<select>').append('<option value="">--Select a KPI Info--</option>'),
            
                    
            createView : function(){
                return $('<div>').append(
                    '<label>Select a Chart type: </label> '
                ).append(
                    VIEW.chartTypeSelect
                ).append(
                    '<br>'
                ).append(
                    '<label>Select a KPI: </label> '
                ).append(
                    VIEW.modelSelect
                ).append(
                    VIEW.kpiSelect
                ).append(
                    '<br>'
                ).append(
                    '<label>Select a KPI Field for the axis X: </label> '
                ).append(
                    VIEW.kpiFieldsForXSelect
                ).append(
                    '<br>'
                ).append(
                    '<label>Select a KPI Field for the axis Y: </label> '
                ).append(
                    VIEW.kpiFieldsForYSelect
                ).append(
                    '<br>'
                ).append(
                    '<label>Select a KPI Info for the Threshold: </label> '
                ).append(
                    VIEW.kpiMoreInfoForThresholdSelect
                ).append(
                    '<br>'
                ).append(
                    '<label>Select a KPI Info for the Alert: </label> '
                ).append(
                    VIEW.kpiMoreInfoForAlertSelect
                );
            }
        };
        
        if(presetConfig != null){
            VIEW.chartTypeSelect.val(presetConfig.chartType.value);
            VIEW.modelSelect.val(presetConfig.modelId.value);
            VIEW.modelSelect.trigger("change");
            VIEW.kpiSelect.val(presetConfig.kpiId.value);
            VIEW.kpiSelect.trigger("change");
            VIEW.kpiFieldsForXSelect.val(presetConfig.kpiFieldForAxisX.value);
            VIEW.kpiFieldsForYSelect.val(presetConfig.kpiFieldForAxisY.value);
            VIEW.kpiMoreInfoForThresholdSelect.val(presetConfig.kpiMoreInfoForThreshold.value);
            VIEW.kpiMoreInfoForAlertSelect.val(presetConfig.kpiMoreInfoForAlert.value);
        }
        
        var okHandler = function(){
            var chartType = VIEW.chartTypeSelect.val();
            var modelId = VIEW.modelSelect.val();
            var kpiId = VIEW.kpiSelect.val();
            var kpiFieldForAxisX = VIEW.kpiFieldsForXSelect.val();
            var kpiFieldForAxisY = VIEW.kpiFieldsForYSelect.val();
            var kpiMoreInfoForThreshold = VIEW.kpiMoreInfoForThresholdSelect.val();
            var kpiMoreInfoForAlert = VIEW.kpiMoreInfoForAlertSelect.val();
            
            if(chartType === '')
                throw 'chartType is missing';
            if(modelId === '' || kpiId === '')
                throw 'modelId or kpiId missing';
            if(kpiFieldForAxisY === '')
                throw 'Kpi Field For Axis Y is missing';
            
            return {
                chartType : {value : chartType},
                modelId : {value : modelId},
                kpiId : {value : kpiId},
                kpiFieldForAxisX : {value : kpiFieldForAxisX},
                kpiFieldForAxisY : {value : kpiFieldForAxisY},
                kpiMoreInfoForThreshold : {value : kpiMoreInfoForThreshold},
                kpiMoreInfoForAlert : {value : kpiMoreInfoForAlert},
            }
        };
        
        return {
            nodeElement : VIEW.createView(),
            okHandler : okHandler
        };
    },
    
    getPreferredSize : function(){
        return {w:4, h:4};
    }
});